<template>
  <div class="home-list" :style="{ height: scrollHeight + 'px' }">
    <div class="home-list-mains">
      <n-tabs
        v-model:value="state.tabValue"
        type="line"
        @update:value="tabChange"
      >
        <n-tab-pane name="作品" :tab="`作品 ${user.photo_num_count}`">
          <work-list ref="workRef" :userId="userId" />
        </n-tab-pane>
        <n-tab-pane name="收藏" :tab="`收藏 ${user.coll_count}`">
          <home-coll :userId="userId" @change="handChange" />
        </n-tab-pane>
        <n-tab-pane name="关注" :tab="`关注 ${user.concern_count}`">
          <home-follow :userId="userId" @change="handChange" />
        </n-tab-pane>
        <n-tab-pane name="粉丝" :tab="`粉丝 ${user.fans_count}`">
          <home-fans :userId="userId" @change="handChange" />
        </n-tab-pane>
        <template #suffix>
          <div
            class="filter flex align-center"
            v-if="state.tabValue === '作品'"
          >
            <div class="filter-item">
              <n-select
                v-model:value="queryForm.oneCategoryId"
                :options="options"
                filterable
                placeholder="全部分类"
                clearable
                @update:value="handSearch"
              />
            </div>
            <div class="filter-item">
              <n-select
                v-model:value="queryForm.institutionId"
                :options="institutionList"
                filterable
                placeholder="全部机构"
                clearable
                @update:value="twoCategoryChange"
              />
            </div>
            <div class="filter-item">
              <n-select
                v-model:value="queryForm.authorId"
                :options="userOpitons"
                filterable
                placeholder="全部角色"
                label-field="username"
                value-field="id"
                clearable
                @update:value="handSearch"
              />
            </div>
            <div class="filter-item">
              <n-select
                v-model:value="queryForm.sortType"
                :options="sortOptions"
                filterable
                placeholder="默认排序"
                @update:value="handSearch"
              />
            </div>
          </div>
        </template>
      </n-tabs>
    </div>
    <!-- <div class="share-line">
      <img src="@/assets/qrcode.png" alt="商务联系二维码" />
      <span>分享给微信好友</span>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { NTabPane, NTabs } from 'naive-ui'
import { reactive, ref, computed, inject } from 'vue'
import WorkList from './WorkList.vue'
import HomeColl from './HomeColl.vue'
import HomeFollow from './HomeFollow.vue'
import HomeFans from './HomeFans.vue'
import homeApi from '@/service/api/home'
// import ClassifyApi from '@/service/api/home/classify'
// import { useRoute } from 'vue-router'
import { getUrlParams } from '@/utils'
type PropsState = {
  userId: number
  user: any
}
withDefaults(defineProps<PropsState>(), {
  userId: 0,
  user: () => {
    return {
      id: ''
    }
  }
})
const emit = defineEmits(['change'])
const $clone = inject('$clone') as <T>(data: T) => T
interface filterItem {
  id: number | null
  name: string
}
const clasifyList = ref<filterItem[]>([])
const getClassify = async () => {
  const { data } = await homeApi.tabs()
  clasifyList.value = data
}
getClassify()
const options = computed(() => {
  const list = $clone(clasifyList.value)
  return [
    ...list.map((el: any) => {
      return {
        label: el.name,
        value: el.id
      }
    })
  ]
})
const sortOptions = [
  {
    label: '点击量',
    value: 'view'
  },
  {
    label: '购买量',
    value: 'buy'
  },
  {
    label: '收藏量',
    value: 'coll'
  },
  {
    label: '点赞量',
    value: 'like'
  },
  {
    label: '图片数量',
    value: 'photo'
  },
  {
    label: '创建时间',
    value: 'create_at'
  }
]
const institutionList: any = ref([])

const getInstitution = async () => {
  const { data } = await homeApi.institution()
  institutionList.value = data.map(el => {
    return {
      label: el.name,
      value: el.id
    }
  })
}
getInstitution()

const state = reactive({
  tabValue: '作品'
})
const queryForm = ref({
  oneCategoryId: null,
  institutionId: null,
  authorId: null,
  sortType: 'view'
})
const tabChange = () => {
  queryForm.value = {
    oneCategoryId: null,
    institutionId: null,
    authorId: null,
    sortType: 'view'
  }
}
const workRef = ref()
const handSearch = () => {
  workRef.value?.handSearch(queryForm.value)
}
const userOpitons = ref([])
const twoCategoryChange = async (e: any) => {
  queryForm.value.authorId = null
  if (e) {
    const { data } = await homeApi.institutionUser({
      institution_id: e
    })
    userOpitons.value = data
  } else {
    userOpitons.value = []
  }
  handSearch()
}

const handChange = () => {
  emit('change')
}
const bili = window.innerWidth / 1920
const scrollHeight = window.innerHeight - Number((61 * bili).toFixed(2))

const typeChange = () => {
  tabChange()
  const routeParam: any = getUrlParams()
  if (routeParam.type) {
    if (routeParam.type == '0') {
      state.tabValue = '作品'
    } else if (routeParam.type == '2') {
      state.tabValue = '收藏'
    } else if (routeParam.type == '3') {
      state.tabValue = '关注'
    } else if (routeParam.type == '4') {
      state.tabValue = '粉丝'
    }
  }
}

typeChange()
defineExpose({
  typeChange
})
</script>

<style scoped lang="scss">
.home-list {
  background: #f5f5f5;
  padding: 20px 0 48px 0;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  .share-line {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 208px;
    height: 214px;
    background: #ffffff;
    border-radius: 12px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 122px;
      height: 122px;
    }
    span {
      margin-top: 21px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  &-mains {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    .filter {
      gap: 10px;
      &-item {
        width: 100px;
        display: flex;
        justify-content: flex-end;
        .select {
          cursor: pointer;
          font-size: 14px;
          i {
            margin-left: 2px;
            font-size: 14px;
          }
        }
      }
    }
    .n-tabs {
      flex: 1;
    }
    .n-tabs.n-tabs--top .n-tab-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .scroll {
      flex: 1 0 0;
      overflow-y: auto;
    }
    .pagination {
      padding: 40px 20px 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
<style lang="scss"></style>
